<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Caballeros Latinos</title>
<LINK REL="SHORTCUT ICON" HREF="http://u.jimdo.com/www46/o/s227d2b216af942a0/img/i3a6f12b157703d41/1325701635/std/image.png">
<link rel="stylesheet" href="https://proyct.googlecode.com/svn/trunk/Lista-Caballeros/css/main.css" type="text/css" media="all">

<link href="https://proyct.googlecode.com/svn/trunk/Lista-Caballeros/css/sortableTable.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://proyct.googlecode.com/svn/trunk/Lista-Caballeros/js/mootools.js"></script>
<script type="text/javascript" src="https://proyct.googlecode.com/svn/trunk/Lista-Caballeros/js/sortableTable.js"></script>


<script type="text/javascript" src="https://proyct.googlecode.com/svn/trunk/Lista-Caballeros/js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">
function CheatClick(){var ffa = document.getElementById("keyword");ffa.value = "Lider";};
function CheatClick2(){var ffa2 = document.getElementById("keyword");ffa2.value = "Bislider";};
function CheatClick3(){var ffa3 = document.getElementById("keyword");ffa3.value = "Officer";};
function CheatClick4(){var ffa4 = document.getElementById("keyword");ffa4.value = "Kinsman";};

</script>
<link href="https://proyct.googlecode.com/svn/trunk/Lista-Caballeros/css/botton.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript"> 
jQuery.noConflict();
jQuery(document).ready(function(){

	jQuery("#select_comprobar").click(function() {
		alert("Id: "+$("#column option:selected").val()+" | Texto: "+$("#column option:selected").text());
	});
	jQuery("#Lider").click(function() {
		jQuery("#column option[value=1]").attr("selected",true);
	});
	jQuery("#Bislider").click(function() {
		jQuery("#column option[value=1]").attr("selected",true);
	});
	jQuery("#Officer").click(function() {
		jQuery("#column option[value=1]").attr("selected",true);
	});
	jQuery("#Kinsman").click(function() {
		jQuery("#column option[value=1]").attr("selected",true);
	});

});
</script>


</head>
<body>

	<div id="abc">
	
	
		<h2 class="example">Lista De Miembros Caballeros Latinos</h2>
		<div id="example">
			<div class="tableFilter">
		  		<form id="tableFilter" onsubmit="myTable.filter(this.id); return false;">Filtar Por: 
					<select id="column" name="column">
					    <option value="0">Nombre</option>
		  				<option value="1">Rango</option>
						<option value="2">Foto</option>
						
					</select>
					Buscar En La Tabla &rArr; <input type="text" id="keyword" />
					<input type="submit" value="Buscar"class="button small green" />
					<input type="reset" value="Mostrar Todo (Restaurar)" class="button small green"/><h3>Categorias</h3>
							<input type="submit"  name="Lider" id="Lider"onclick="CheatClick()"class="button small blue" value="Lider" /> 
<input type="submit"  name="Bislider" id="Bislider" onclick="CheatClick2()"class="button small blue" value="Bislider"/> 
<input type="submit"  name="Officer" id="Officer"onclick="CheatClick3();"class="button small blue"value="Officer" />
<input type="submit"  name="Kinsman" id="Kinsman"onclick="CheatClick4();"class="button small blue"value="Kinsman" />

<p>&nbsp;</p>
		  </div>
		  <table id="myTable" cellpadding="0" cellpadding="0">
		  	<thead>
				<th axis="string">Nombre</th>
				<th axis="string">Rango</th>
				<th axis="string">Foto</th>
				
			</thead>
			<tbody>
				<tr id="Maatz"><td>Maatz</td>
					<td>Lider</td>
                    <td><img src="http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/381911_152233834889918_100003099078665_221617_350943192_n.jpg" width="150" height="150"></td>
		</tr>
				<tr id="Kidex Mcelcium"><td>Kidex Mcelcium</td>
					<td>Bislider</td>
                    <td><img src="http://a3.sphotos.ak.fbcdn.net/hphotos-ak-snc7/396756_137393879707247_100003099078665_176574_1204974193_n.jpg" width="150" height="150"></td>
		</tr>
		<tr id="Xayder Elmagnifico"><td>Xayder ElMagnifico</td>
					<td>Officer</td>
                    <td><img src="http://i1140.photobucket.com/albums/n566/chayder96/ScreenShot00229.jpg" width="150" height="150"></td>
		</tr>
						<tr id="Namariela Hernandez"><td>Namariela Hernandez</td>
					<td>Officer</td>
                    <td><img src="https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash3/558575_10150814617039891_36138507_n.jpg" width="150" height="150"></td>
		</tr>
						<tr id="Brankitoxx"><td>Brankitoxx</td>
					<td>Officer</td>
                    <td></td>
		</tr>
		<tr id="Xxayder Musico"><td>Xxayder Musico</td>
					<td>Officer</td>
                    <td></td>
		</tr>
		<tr id="Agustinoxx"><td>Agustinoxx</td>
					<td>Officer</td>
                    <td></td>
		</tr>
		<tr id="Mateopz"><td>Mateopz</td>
					<td>Officer</td>
                    <td></td>
		</tr>
		<tr id="Sealmar"><td>Sealmar</td>
					<td>Officer</td>
                    <td></td>
		</tr>
		<tr id="Madferit"><td>Madferit</td>
					<td>Officer</td>
                    <td></td>
		</tr>
		<tr id="Nimoriel"><td>Nimoriel</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Bigoton"><td>Bigoton</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Fredmond"><td>Fredmond</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Nassek"><td>Nassek</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Maite"><td>Maite</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Agustinoox"><td>Agustinoox</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Elmagodeoz"><td>Elmagodeoz</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Matutexx"><td>Matutexx</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Nimlithel"><td>Nimlithel</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Artheel"><td>Artheel</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Diewulf"><td>Diewulf</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Dustfingers"><td>Dustfingers</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Brankitox"><td>Brankitox</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Ordimvis"><td>Ordimvis</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Melrid"><td>Melrid</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Constantino"><td>Constantino</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Branghar"><td>Branghar</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Esmaurii"><td>Esmaurii</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Sakhum"><td>Sakhum</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Chayderarmando"><td>Chayderarmando</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Meridilia"><td>Meridilia</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Fraan"><td>Fraan</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Jacbauer"><td>Jacbauer</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Joselrond"><td>Joselrond</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Anario"><td>Anario</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Frankox"><td>Frankox</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Tyrladir"><td>Tyrladir</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Mauricie"><td>Mauricie</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
		<tr id="Anariohtar"><td>Anariohtar</td>
					<td>Kinsman</td>
                    <td></td>
		</tr>
			</tbody>
			<tfoot>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tfoot>
		  </table>

		
		<script type="text/javascript">
			var myTable = {};
			window.addEvent('domready', function(){
				myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
			});
		</script>
		</div>		
		</div>
		
</body>
</html>